<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*div{
            width:100px; border: 1px black solid;white-space: nowrap;
            overflow: hidden;text-overflow: ellipsis;
        }*/
        div{
            width: 100px;border: 1px black solid;
            display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        }
    </style>
</head>
<body>
    <!--单行添加省略号
        width 必须有一个固定的宽
        white-space:nowrap 不让内容折行
        overflow:hidden 隐藏溢出的内容
        text-overflow:ellipsis 添加省略号
        多行添加省略号
        display: -webkit-box; 将盒子转换成弹性盒子
        -webkit-box-orient: vertical; 文本显示方式 默认水平
        -webkit-line-clamp: 2; 设置显示多少行
        overflow: hidden;
    -->
</body>
    <div id="content">测试测试测试测试测试测试测试测试测试测试测试测试</div>
</html>